<template>
  <div>
    <v-dialog max-width="60%" v-model="show" persistent scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit ? '修改' : '新增'}}歌曲</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <svg-icon icon-class="guanbi" size="26"></svg-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text style="height: 600px;width: 95%">
          <songs-form
            @changeSong = "changeSong"
            @close="closeWindow"
            :step="step"
            :is-edit="isEdit"
            ref="songForm"/>
        </v-card-text>
        <!--底部按钮，用来操作步骤线-->
        <v-card-actions class="elevation-10">
          <v-flex class="xs3 mx-auto">

            <div v-if="step === 1">
              <v-btn @click="previous" color="primary" :disabled="step === 1">上一步</v-btn>
              <v-btn @click="next" color="primary" :disabled="step === 3">下一步</v-btn>
            </div>
            <div v-if="step > 1">
              <v-btn @click="previous" color="primary" >上一步</v-btn>
              <v-btn @click="submit" color="primary" >上传</v-btn>
            </div>
          </v-flex>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import SongsForm from './SongForm'
  import axios from 'axios'
  export default {
    name: 'upload-song',
    props: {
      show: {
        type: Boolean,
        default: false
      },
      userId: {
        type: String
      }
    },
    data () {
      return {
        step: 1,
        oldSong:{},
        isEdit: false,
      }
    },
    components: {
      SongsForm
    },
    methods: {
      closeWindow() {
        // 关闭窗口

        // 将步骤调整到1
        this.step = 1;

        this.$emit("changShow",false);

        this.$refs.songForm.songform = {
          picture: "",
          songUrl: "",
          audioDuration: 0,
          lyric: "",
        }
      },
      previous() {
        this.step--
      },
      next() {
        this.step++
      },
      addSong() {
        this.isEdit = false
        this.show = true
        this.oldSong = null
        // this.$refs.songForm.reset()
        this.$refs.songForm.songform = {
          picture: "",
          songUrl: "",
          audioDuration: 0,
          lyric: "",
        }
      },
      submit() {
        const {categories,singer, ...params} = this.oldSong
        console.log(categories)
        params.cids = categories.map(c => c.id).join(",");
        params.singerId = singer.id;
        params.userId = this.userId;
        axios.post("api/user/upload/song", this.$qs.stringify(params) )
          .then(()=>{
          // 成功，关闭窗口
          this.$emit("close");
          // 提示成功
          this.$message.success("保存成功");
          //关闭窗口
          this.closeWindow();
        })
          .catch(error => {
            console.log(error)
            this.$message.error("保存失败！");});
      },
      changeSong(obj) {
        this.oldSong = obj
        console.log("song页面oldSong父组件"+this.oldSong)
      },
    }
  }
</script>

<style scoped>
  .search-song-Lists{
    min-height: 300px;
    margin-top: 50px;
  }
</style>
